<template>
	<div>
        <v-container>
        
        <p class="headinfo"> 利佳健康服务提供的会员 </p>
        <v-card
            class="mx-auto"
            max-width="100%"
        >
            
            <v-img
            class="white--text"
            height="150px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
            >
            <v-card-title class="align-end fill-height">利佳会员</v-card-title>
            </v-img>

            <v-card-text>
            <span>HKD$980.00</span><br>
            <span class="text--primary">
                <span class="overline">加入利佳会员服务，可以获取相关产品高达20%的优惠</span><br>
            </span>
            </v-card-text>

            <v-card-actions>
            <v-btn
                text
                color="success"
                small
                @click="paymember"
                :loading="loding"
            >
                立即付费
            </v-btn>
            </v-card-actions>
            <v-btn
                color="success"
                dark
                absolute
                right
                fab
                bottom
                class="white--text"
                @click="back"
            >
                back
            </v-btn>
        </v-card>
        <v-row justify="center">
            <v-dialog v-model="dialog.isopen" persistent max-width="290">
            <template v-slot:activator="{ on }">
                
            </template>
            <v-card>
                <v-card-title>{{ dialog.title }}</v-card-title>
                <v-card-actions>
                    <div class="flex-grow-1"></div>
                    <v-btn color="green darken-1" text @click="ok">{{ dialog.ok }}</v-btn>
                    <v-btn color="green darken-1" text @click="no">{{ dialog.no }}</v-btn>
                </v-card-actions>
            </v-card>
            </v-dialog>
        </v-row>
        <div class="text-center">
            <v-dialog
            v-model="loding"
            :persistent="true"
            width="300"
            >
            <v-card
                color="primary"
                dark
            >
                <v-card-text>
                请稍侯...
                <v-progress-linear
                    indeterminate
                    color="white"
                    class="mb-0"
                ></v-progress-linear>
                </v-card-text>
            </v-card>
            </v-dialog>
        </div>
  </v-container>
</div>
</template>
<script>
import { paymember, wxpayjsapi, domain } from './../../api/api'

export default {
    data: ()=>({
        loding:false,
        dialog:{
            isopen:false,
            title:'',
            ok:'',
            no:'',
        }
    }),
    created:function(){

    this.$store.commit('setProgress',false)
    
    },
    methods: {
        back:function(e){
            this.$router.go(-1)
        },
        paymember:function(e){
            this.$store.commit('setProgress',true)
            this.loding = true
            paymember(this.$cookies.get("authtoken"))
            .then((resp)=>{
                var res = resp.data
                this.$store.commit('setProgress',false)
                if(res.code==1){
                    // 成功下单进入下一步
                    console.log(res.data)
                    window.location.href = "//iuu.pub/pay/wechat?order_no="+res.data+'&calluri=/user/member';
                }else{
                    if( res.result.errcode == 3001){
                        window.location.href = "//iuu.pub/api/oauth/wechat";
                    }else if( res.result.errcode == 2001){
                        // 登录页面
                        this.$router.push({path:'/login'})
                    }else{
                        if(res.msg=="需要微信授权"){
                            this.loding = false
                            this.dialog = {
                                isopen: true,
                                title: res.msg,
                                ok:'前往授权',
                                no:'取消'
                            }
                        }
                        
                    }
                }

            })
        },
        ok:function(e){
            this.dialog.isopen = false;
            this.$router.push({path:'/order/management'})
            if(this.dialog.ok == "前往授权"){
                this.$router.push("/oauth/wechat")
            }
        },
        no:function(e){
            this.dialog.isopen = false;
        },

    }
}
</script>
<style scoped>
.headinfo {
    color: #00000055;
}
</style>